<!--
 * @description 活动列表组件
 * @date 2022/11/12
 -->
<template>
  <div v-if="list && list.length>0" class="activity-list-comp" :style="{ 'margin-top': top }">
    <van-pull-refresh
      id="specialIndex"
      v-model="isLoading"
      @refresh="onRefresh"
    >
      <van-list
        v-model="loading"
        :finished="finished"
        :finished-text="finishedText"
        :immediate-check="false"
        :offset="20"
        @load="onLoad"
      >
        <div
          v-for="(item, i) in list"
          :key="i"
          class="activity-item"
          @click="goDetail(item)"
        >
          <div class="top-content">
            <label-comp v-if="labelObj!==undefined" :label-list="item.labelList" class-name="my-tag" />
            <van-image
              class="activity-cover"
              :src="setImgPath(getMapping(item,'imgId'),getMapping(item,'imgUrl'), 1)"
            >
              <template v-slot:loading>
                <van-loading type="spinner" size="20" />
              </template>
              <template v-slot:error>
                <img src="./images/error-icon.png" alt>
              </template>
            </van-image>
          </div>
          <section class="item-info">
            <p class="title etc">{{ getMapping(item, 'activityName') || '' }}</p>
            <p class="desc">
              <span>{{ getMapping(item, 'startTime') | newFormatTime }}至{{
                getMapping(item, 'endTime') | newFormatTime
              }}
              </span>
              <span
                v-if="
                  item.activityType === 3 &&
                    item.isShowNumber == '1' &&
                    item.joinNumber > 0
                "
                class="join-count"
              ><img class="userIcon" src="./images/userIcon.png" alt="">{{
                item.joinNumber
              }}人已投票</span>
              <span
                v-else-if="item.activityType === 2 && item.joinNumber"
                class="join-count"
              ><img class="userIcon" src="./images/userIcon.png" alt="">{{
                item.joinNumber
              }}人已参与</span>
            </p>
          </section>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import mixins from './../mixins'
import LabelComp from '@/components/CustomPage/apps/widget/labelComp'

export default {
  name: 'ActivityListComp',
  components: { LabelComp },
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default() {
        return {}
      }
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false, // 是否处于加载状态
      finished: false, // 是否已加载完所有数据
      isLoading: false, // 是否处于下拉刷新状态
      finishedText: '已经到底了',
      list: [], // 列表数据
      isNoData: false,
      /** 接口参数 start */
      page: 1,
      /** 接口参数 end */
      defaultList: [
        {
          id: '719faf8dac324ec8a990e297772a23f1',
          statusValue: '启用',
          imgId: '22111220fb885e3b674169b7e345b00e5c9c55.jpg',
          imgUrl:
              'https://bjttsx-yanshi.oss-cn-beijing.aliyuncs.com/4146cde6-8f9b-4580-a154-f410e2c3fd2a/22/11/12/22111220fb885e3b674169b7e345b00e5c9c55.jpg',
          activityType: 1,
          activityName: '开班活动',
          startTime: '2022-11-12 00:00:00',
          endTime: '2022-11-14 00:00:00',
          activityStatus: '进行中',
          bid: '4146cde6-8f9b-4580-a154-f410e2c3fd2a'
        },
        {
          id: '8340faf3-95be-4d15-b1e8-81c25334a888',
          imgId: '2211123a0d2ea84756476b863cb576cc15ce3c.jpg',
          imgUrl:
              'https://bjttsx-yanshi.oss-cn-beijing.aliyuncs.com/4146cde6-8f9b-4580-a154-f410e2c3fd2a/22/11/12/2211123a0d2ea84756476b863cb576cc15ce3c.jpg',
          joinNumber: 2,
          activityType: 2,
          activityName: '绘画投票',
          startTime: '2022-11-12 00:00:00',
          endTime: '2022-11-14 23:59:59',
          activityStatus: '进行中',
          createType: 'LOAD',
          bid: '4146cde6-8f9b-4580-a154-f410e2c3fd2a'
        }
      ],
      labelObj: undefined
    }
  },
  async created() {
    if (this.isInitData) {
      this.labelObj = await this.getLabelList()
      await this.initData()
    } else {
      this.list = this.defaultList
      this.finished = true
    }
  },
  methods: {
    setData(result) {
      const res = result.dataList
      const { rows, total } = res.data || {}
      this.list.push(...rows)
      this.loading = false
      this.isLoading = false
      this.isNoData = total < 1
      if (this.isNoData) {
        this.finishedText = ''
      } else {
        this.finishedText = '已经到底了'
      }
      if (this.list.length >= total) {
        this.finished = true
      } else {
        this.finished = false
      }
      if (this.labelObj !== undefined) {
        this.setLabel(this.list, 'list')
      }
    },
    /**
     * 加载数据
     */
    async seflLoadData() {
      await this.getDataByCode('dataList')
    },
    /**
     * 刷新
     */
    onRefresh() {
      return new Promise((resolve, reject) => {
        this.finished = false
        this.page = 1
        this.list = []
        this.seflLoadData()
        reject()
      })
    },

    /**
     * 上拉加载
     */
    onLoad() {
      if (!this.isLoading) {
        this.page += 1
        this.seflLoadData()
      } else {
        this.loading = false
      }
    },
    goDetail(item) {
      return
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/styles/var.scss';
@import '@/styles/utility/rem.scss';

.activity-list-comp {
  .van-pull-refresh {
    background: #f2f5f8;
    padding: rem(20) rem(24);
    padding-bottom: rem(30);
    //overflow: auto;
    -webkit-overflow-scrolling: touch;

    .activity-item {
      background: #fff;
      margin-bottom: rem(20);
      border-radius: rem(16);
      overflow: hidden;

      .top-content {
        position: relative;

        .my-tag {
          position: static;
          margin-top: rem(50);
        }
      }

      .activity-type {
        padding: rem(10);
        height: rem(32);
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
        @include bg-color($mainColor);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: rem(20);
        border-radius: rem(16) 0 rem(16) 0;
      }

      .status {
        padding: rem(10);
        height: rem(32);
        position: absolute;
        right: 0;
        top: 0;
        z-index: 2;
        background-color: #bcb8b8;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: rem(20);
        border-radius: 0 rem(16) 0 rem(16);

        &.active {
          background-color: #eb523c;
        }
      }

      .activity-cover {
        display: block;
        width: 100%;
        height: rem(310);
        border-radius: rem(16) rem(16) 0 0;
        position: relative;

        img {
          height: 100%;
          border-radius: rem(16) rem(16) 0 0;
        }
      }

      .item-info {
        padding: 0 rem(20);
        background-color: #fff;
        width: 100%;
        height: rem(130);
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-radius: 0 0 rem(16) rem(16);

        p {
          margin: 0;
        }

        .title {
          font-size: rem(30);
          color: #333;
          font-weight: bold;

          margin-bottom: rem(16);
        }

        .desc {
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: rem(24);
          color: #666;

          .join-count {
            color: #999;
            display: flex;
            align-items: center;

            img {
              width: rem(24);
              height: rem(26);
              margin-right: rem(4);
            }
          }
        }
      }
    }
  }
}
</style>
